import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {FormsModule} from "@angular/forms";
import {RouterModule, Routes} from "@angular/router";
import {NgxsModule} from "@ngxs/store";
import {environment} from "../environments/environment";
import {states} from "./store";
import {NgxsStoragePluginModule, StorageOption} from "@ngxs/storage-plugin";
import {NgxsLoggerPluginModule} from "@ngxs/logger-plugin";
import {NgxsReduxDevtoolsPluginModule} from "@ngxs/devtools-plugin";
import {NgxsRouterPluginModule, RouterStateSerializer} from "@ngxs/router-plugin";
import {CustomRouterStateSerializer} from "./store/router/router-state.serializer";
import {SharedModule} from "./shared/shared.module";

const routes: Routes = [
  {path: '', redirectTo: 'shop', pathMatch: 'full'},
  {path: 'manager', loadChildren: () => import('./pages/manager/manager.module').then(m => m.ManagerModule),},
  {path: 'shop', loadChildren: () => import('./pages/shop/shop.module').then(m => m.ShopModule),},
  {path: 'cart', loadChildren: () => import('./pages/cart/cart.module').then(m => m.CartModule),},
];

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    SharedModule,
    RouterModule.forRoot(routes),
    NgxsModule.forRoot([...states], {developmentMode: !environment.production}),
    // NgxsLoggerPluginModule.forRoot({disabled: environment.production}),
    NgxsReduxDevtoolsPluginModule.forRoot({disabled: environment.production}),
    NgxsStoragePluginModule.forRoot({storage: StorageOption.SessionStorage}),
    NgxsRouterPluginModule.forRoot(),
  ],
  providers: [
    {provide: RouterStateSerializer, useClass: CustomRouterStateSerializer}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
